<script setup lang="ts">
import Card from 'primevue/card';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import Row from 'primevue/row';
import {onMounted, ref} from "vue";
import {classAddApi, classListApi,getMyClassListApi,joinClassApi} from "@/api/class/index";
// import toast from "@/util/toast";

const list = ref([])
const visible = ref(false)

// 新建班级弹框
const classAddParams = ref({
  className: "",
  classDesc: "",
  password: "",
});



const editingRows = ref([])
const expandedRows = ref([
  {
    id: 1
  }
])
/**
 * 页面初始化
 */
onMounted(() => {
  requestClassList()
})
/**
 * 请求班级列表
 */
const requestClassList = () => {
  classListApi().then(res => {
    list.value = res.data
    console.log(res.data);
    
  }).catch(err => {
  
  })
}
/**
 * 新建班级
 */
const onSave = () => {
  classAddApi({...classAddParams.value}).then(res => {
    // toast.add({severity: 'success', summary: '成功', detail: '新建班级成功'})
    requestClassList();
    visible.value = false
  }).catch(err => {
    console.log(err)
  })
};
// const onRowEditSave = (e) => {
//   console.log(e)
// }
/**
 * 打开下来框时触发
 * @param e
 */
// const onRowExpand = (e) => {
//   //请求学生列表
//   for (let i = 0; i < list.value.length; i++) {
//     if (list.value[i].id === e.data.id) {
//       list.value[i].studentList = [
//         {
//           id: 1,
//           studentId: "2018001",
//           realname: "张三",
//           avatar: "https://avatars.githubusercontent.com/u/26627064?v=4",
//           nickname: "小张",
//           gender: "0",
//           phone: "12345678901",
//           email: "12195694@qq.com"
//         },
//         {
//           id: 2,
//           studentId: "2018002",
//           realname: "李四",
//           avatar: "https://avatars.githubusercontent.com/u/26627064?v=4",
//           nickname: "小李",
//           gender: "0",
//           phone: "12345678901",
//           email: "12195694@qq.com"
//         }
//       ]
//       console.log(list.value[i])
//     }
//   }
//   console.log(e)
// }
// const onRowCollapse = (e) => {
//   console.log(e)
// }
const onAdvancedUpload = (e:any) => {
  console.log(e)
}
</script>

<template>
  <card>
    <template #content>
      <DataTable :value="list"  showGridlines stripedRows editMode="row"
                 dataKey="id" @row-edit-save="onRowEditSave" v-model:editingRows="editingRows"
                 @rowExpand="onRowExpand" @rowCollapse="onRowCollapse"
                 v-model:expandedRows="expandedRows"
      >
        <template #header>
          <div class="flex flex-wrap align-items-center justify-content-between gap-2">
            <span class="text-xl text-900 font-bold">班级管理</span>
            <Button label="新建" raised @click="visible = true"></Button>
          </div>
        </template>
        <Column expander style="width: 5rem"/>
        <Column field="className" header="班级名称">
          <template #editor="{ data, field }">
            <InputText v-model="data[field]"/>
          </template>
        </Column>
        <Column field="classDesc" header="班级简介"></Column>
        <Column field="password" header="进班密码"></Column>
        <Column :rowEditor="true" style="width: 10%; min-width: 8rem" bodyStyle="text-align:center"></Column>
        <!--        下拉扩展框-->
        <template #expansion="slotProps">
          <div class="p-3">
            <DataTable :value="slotProps.data.studentList">
              <Column field="studentId" header="学号" sortable></Column>
              <Column field="realname" header="学生姓名" sortable></Column>
              <Column field="avatar" header="头像" sortable>
                <template #body="slotProps">
                  <img :src="slotProps.data.avatar" alt="" class="w-8 h-8 rounded-full"/>
                </template>
              </Column>
              <Column field="nickname" header="昵称" sortable></Column>
              <Column field="gender" header="性别" sortable>
                <template #body="slotProps">
                  <Tag severity="info" value="男"></Tag>
                </template>
              </Column>
              <Column field="phone" header="手机号" sortable></Column>
              <Column field="email" header="邮箱" sortable></Column>
            </DataTable>
          </div>
        </template>
      </DataTable>
    </template>
  </card>
<!--  新建班级弹框-->
  <Dialog v-model:visible="visible" modal header="新建班级" :style="{ width: '30rem' }">
    <Divider class="mt-0" />
    <div class="flex align-items-center gap-3 mb-3">
      <label class="font-semibold w-6rem">班级名称</label>
      <InputText v-model="classAddParams.className" class="flex-auto" autocomplete="off"/>
    </div>
    <div class="flex align-items-center gap-3 mb-3">
      <label class="font-semibold w-6rem">班级描述</label>
      <InputText v-model="classAddParams.classDesc" class="flex-auto" autocomplete="off"/>
    </div>
    <div class="flex align-items-center gap-3 mb-3">
      <label class="font-semibold w-6rem">进班密码</label>
      <InputText v-model="classAddParams.password" class="flex-auto" autocomplete="off"/>
    </div>
    <div class="flex justify-content-end gap-2">
      <Button type="button" label="取消" severity="secondary" @click="visible = false"></Button>
      <Button type="button" label="保存" @click="onSave"></Button>
    </div>
  </Dialog>
</template>

<style scoped>

</style>